<template>
	<div class="recommend-wrapper">
		<van-sidebar>
			<van-sidebar-item title="编辑推荐" />
		</van-sidebar>
		<van-grid :center="false" :column-num="3">
			<van-grid-item
				v-for="item in newPlayList"
				:key="item.id"
				class="item"
				@click="go(item.id)"
			>
				<van-image :src="item.coverImgUrl" />
				<div class="text">{{ item.name }}</div>
				<div class="play-count">
					<van-icon name="service-o" />
					{{ (item.playCount / 10000).toFixed(1) }}万
				</div>
			</van-grid-item>
		</van-grid>
		<div>
			<van-sidebar>
				<van-sidebar-item title="最新音乐" />
			</van-sidebar>
			<song-list :list="getNewSongList" />
		</div>
	</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
	computed: {
        // 编辑推荐
		...mapState("recommend", ["playList","newSongList"]),
		newPlayList() {
			return this.playList;
		},
		getNewSongList () {
			return this.newSongList.map((item) => ({
				id: item.id,
				name: item.name, // 歌曲名
				maxBr: item.song.privilege.downloadMaxbr, // 最大音质
				alias: item.song.alias[0], // 别名
				artists: item.song.artists, // 歌手数组
				albumName: item.song.album.name, // 专辑名
			}));
		},
	},
	created() {
        // 编辑推荐
		this.updatePlayList();
        this.updateNewSongList();
	},
	methods: {
		...mapActions("recommend", ["updatePlayList", "updateNewSongList"]),
		go(id) {
			this.$router.push({
				name: "/song-information",
				query: { id },
			});
		},
	},
};
</script>
<style scoped>
.recommend-wrapper {
	overflow-y: auto;
	width: 100%;
	color: #333;
}
.item {
	position: relative;
}
.play-count {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	font-size: 12px;
	text-shadow: 0px 0px 1px #000;
}
.text {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 4px;
	font-size: 15px;
}
</style>